<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Trainer Battle</title>
  <link rel="stylesheet" href="<%=cdnPath%>/css/style.css">
</head>

<body id="body">
  <div class="header">
    <div class="logo"></div>
    <div class="interactive">
      <a class="btn ios" href="<%=links.ios%>" target="_blank">
        <i class="icon"></i>
        <span class="os-txt">
          <%=phrase.ios%>
        </span>
      </a>
      <a class="btn android" href="<%=links.android%>" target="_blank">
        <i class="icon"></i>
        <span class="os-txt">
          <%=phrase.android%>
        </span>
      </a>
      <div class="btn gold hide">
        <%=phrase.connect%>
      </div>
      <%=logged%>
    </div>
  </div>
  <div class="wrap">
    <div class="item event1">
      <div class="title">
        <span class="title-txt">
          <%=event1.title%>
        </span>
      </div>
      <div class="loading"></div>
      <div class="pbs">
        <%=event1.list%>
      </div>
      <div class="btn ed">
        <%=translation.notAchieve%>
      </div>
      <div class="bot">
        <div class="loading"></div>
      </div>
    </div>
    <div class="item event2">
      <div class="widget"></div>
      <div class="title">
        <span class="title-txt">
          <%=event2.title%>
        </span>
      </div>
      <div class="loading"></div>

      <div class="myPrize">
        <div class="overview">
          <%=phrase.overview%>
        </div>
        <div class="lin"></div>
        <div class="gift record">
          <%=phrase.record%>
        </div>
      </div>

      <div class="timebar">
        <div class="item">
          <%=event2.timebarArr[0]%>
        </div>
        <div class="item">
          <%=event2.timebarArr[1]%>
        </div>
        <div class="item">
          <%=event2.timebarArr[2]%>
        </div>
      </div>

      <div class="list pokemons">
        <%=event2.pokemonListMB%>
      </div>
      <div class="btn ed">
        <%=translation.join%>
      </div>
    </div>
    <div class="item event3">
      <div class="title">
        <%=event3.title%>
      </div>
      <div class="loading"></div>
      <div class="box">
        <%=event3.listMb%>
      </div>
    </div>
  </div>
  <div class="footer"></div>

  <div class="mask hide"></div>
  <div class="pop login hide">
    <div class="bkm"></div>
    <div class="close"></div>
    <div class="pop-wrap"></div>
    <div class="x"></div>
    <div class="login">
      <div class="inputs">
        <div class="item">
          <span>
            <%=phrase.account%>
          </span>
          <input id="username" class="input" type="text" placeholder="Entrer le compte">
        </div>
        <div class="item">
          <span>
            <%=phrase.password%>
          </span>
          <input id="password" class="input" type="password" placeholder="Entrer le mot de passe
          ">
        </div>
      </div>
      <div class="btns">
        <div class="btn gold">
          <%=phrase.connect%>
        </div>
        <div class="btn fb"></div>
      </div>
    </div>
  </div>
  <div class="pop ctn hide">
    <div class="bkm"></div>
    <div class="close"></div>
    <div class="pop-wrap"></div>
    <div class="x"></div>
    <div class="ctn"></div>
  </div>

  <div class="pop server hide">
    <div class="bkm"></div>
    <div class="close"></div>
    <div class="pop-wrap"></div>
    <div class="x"></div>
    <div class="server">
      <div class="txt">
        <%=phrase.serverSelect%>
      </div>
      <div class="box">
        <div class="item server">
          <select id="server"></select>
        </div>
        <div class="item role">
          <div id="role"></div>
          <div class="btn gold">
            <%=phrase.confirm%>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="pop overview hide">
    <div class="bkm"></div>
    <div class="close"></div>
    <div class="pop-wrap"></div>
    <div class="x"></div>
    <div class="overview">
      <div class="display-list">
        <div class="item">
          <div class="title">
            3 monstres devinés correctes
          </div>
          <div class="pri"></div>
        </div>
        <div class="item">
          <div class="title">
            4 monstres devinés correctes
          </div>
          <div class="pri"></div>
        </div>
        <div class="item">
          <div class="title">
            5 monstres devinés correctes
          </div>
          <div class="pri"></div>
        </div>
      </div>
    </div>
  </div>

  <script src="<%=cdnPath%>/js/index.js"></script>
</body>

</html>